<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1" />
  <title>colores</title>
  <!-- 依赖 -->
  <script src="./lib/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="./lib/colores.min.css">
  <style>
    /* 目前关闭Safari页面弹性的最优解（显然不是很美观） */
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      overflow: hidden;
    }

    body {
      overflow: auto;
    }

    /* colores 选择器初始样式（可自行修改，下面的都有默认值，不写也罢） */
    .-colores- {
      border-radius: 4px;
      border: 1px solid #ccc;
    }

    .-colores- .es-cb {
      width: 28px;
      height: 28px;
    }

    .-colores- input[type=text] {
      width: 92px;
      line-height: 28px;
      margin-left: 8px;
    }

    /* 弹出层样式可以定义（下面的都有默认值，不写也罢） */
    .es-msgPop {
      background: rgba(0, 0, 0, .6);
      color: #fff;
    }
  </style>
</head>

<body>
  <!-- 
    .-colores- 相当于容器声明
    .es-cb 是当前颜色可视化部分
    input[type=text] 用于存储当前颜色值 (可监听change事件)
  -->
  <div class="-colores-" style="margin:10px ;">
    <div class="es-cb"></div>
    <input type="text" value="#aaccbb" />
  </div>
  <div class="-colores-" style="margin:10px ;">
    <div class="es-cb"></div>
    <input type="text" value="#0080ff" />
  </div>
  <div class="-colores-" style="margin:10px ;">
    <div class="es-cb"></div>
    <input type="text" value="#80ff80" />
  </div>
  <div class="-colores-" style="margin:10px ;">
    <div class="es-cb"></div>
    <input type="text" value="#c4dc4d" />
  </div>
  <div class="-colores-" style="margin:10px ;">
    <div class="es-cb"></div>
    <input type="text" value="#80808080" />
  </div>
  <div class="-colores-" style="margin:10px ;">
    <div class="es-cb"></div>
    <input type="text" value="#0000ff" />
  </div>
  <div class="-colores-" style="margin:10px ;">
    <div class="es-cb"></div>
    <input type="text" value="#000" />
  </div>

  <!-- 主控制器 -->
  <script src="./lib/colores-jq.min.js"></script>

</body>

</html>